<template>
  <layout :isShowFooter="true">
    <div class="d-col-xs-12">
      <Streamer cat="0001" class="streamer-dtools">
        <h1 class="d-text-center">开发与体验实验室</h1>
        <h1 class="d-text-center">Develop And Experience Laboratory UI</h1>
        <h3 class="d-text-center">总结日常经验，分享技术成果</h3>
        <h3 class="d-text-center">优化开发方式，改善开发体验，提升开发效率</h3>
      </Streamer>
      <div class="block-site">
        <div class="" v-for="sec in list" :key="sec.id">
          <div class="block-head">{{sec.title}}</div>
          <div class="block animated fade-in" v-for="item in sec.list" :key="item.id">
            <div class="block-body d-row">
              <div
                v-for="(node, n) in item.list"
                :key="node.id + node.title"
                :class="n % 2 ? 'layout-container-even' : 'layout-container-odd'">
                <div class="d-row">
                  <div class="layout-text d-col-xs-12">
                    <div v-if="node.title" class="text-title">{{node.title}}&emsp;<a v-if="node.projectUrl" :href="node.projectUrl" target="_blank" class="d-btn d-btn-primary d-btn-link d-btn-xs">演示项目>>&emsp;</a><a :href="node.gitUrl" target="_blank" class="d-btn d-btn-primary d-btn-link d-btn-xs">GIT源码>></a>&emsp;<span v-if="node.tip" class="text-tip">{{ node.tip }}</span></div>
                    <div v-if="node.content" class="text-content">{{node.content}}</div>
                  </div>
                  <div class="layout-image d-col-xs-12">
                    <a v-if ="node.projectUrl" :href="node.projectUrl" target="_blank"><img :data-src="node.src" /></a>
                    <img v-else :data-src="node.src" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </layout>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import Layout from '@/components/layout/index.vue'
import Streamer from '@/components/streamer/streamer'
import BlockSite from '@/components/block-site/block-site'
import tl from '@/assets/images/home/0001.png'
import dogui from '@/assets/images/home/0002.jpg'
import dtools from '@/assets/images/home/0003.png'
import dmapt from '@/assets/images/home/0009.png'
import dpad from '@/assets/images/home/0004.jpg'
import molecule from '@/assets/images/home/0005.png'
import designer from '@/assets/images/home/0007.png'
import dqrcode from '@/assets/images/home/0006.png'
import dblog from '@/assets/images/home/0008.png'
import dchat from '@/assets/images/home/0010.jpg'
import dpod from '@/assets/images/home/0011.jpg'

export default {
  components: {
    Layout,
    Streamer,
    BlockSite
  },
  setup() {
    let state = reactive({
      list: [
        {
          id: 1,
          title: 'DF3S - 前端快速开发服务系统',
          list: [
            {
              id: 1001,
              list: [
                {
                  id: 1,
                  title: 'TigerLair(Tiger Lair) - 虎啸系统',
                  content: '前端工程化管理 - 前端视角辅助项目开发，集管理、开发、测试、分析为一体的管理系统。',
                  gitUrl: 'https://gitee.com/daelui-df3s/tigerlair',
                  projectUrl: location.origin + '/#/tigerlair',
                  src: tl,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 2,
                  title: 'DTools(Dog Tools) - 小工具集',
                  content: '工欲善其事，必先利其器；日常开发、测试过程中实用小工具，快捷方便，简单好用；基于HTML语言的工具包,无需安装,可适应多类型终端;基于Web页面操作,方便快捷；系统可网络部署与本地静态访问,有网与无网都可使用,满足各场景下使用',
                  gitUrl: 'https://gitee.com/daelui-df3s/dtools',
                  projectUrl: location.origin + '/#/dtools',
                  src: dtools,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 3,
                  title: 'DMapT(Dog Map Tools) - 地图工具',
                  content: '基于Cesium+NodeJS瓦片地图工具，可下载指定区域的离线地图瓦片，支持天地图、高德地图，也可扩展其他地图；常用工具：坐标定位、地图标记、坐标转换、画图形、模型载入、图层载入、距离量算、面积量算...',
                  gitUrl: 'https://gitee.com/daelui-df3s/dmapt',
                  projectUrl: location.origin + '/#/dmapt',
                  src: dmapt,
                  tip: '演示环境仅前端展示，不提供服务',
                  xs: 6,
                  sm: 4
                }
              ]
            }
          ]
        },
        {
          id: 2,
          title: 'DWAS - 工作自动化系统',
          list: [
            {
              id: 2001,
              list: [
                {
                  id: 1,
                  title: 'DPad(Dog Pad) - 便笺系统',
                  content: '页面管理：快速检索查找, 分组预览页面；笔记管理：笔记帮助助记忆信息，多维度过滤搜索查找；任务管理：分级记录任务，周期定时提醒；归档管理：个性化分组管理，深入文档内部查找',
                  gitUrl: 'https://gitee.com/daelui-dwas/dpad',
                  projectUrl: location.origin + '/#/dpad',
                  src: dpad,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 2,
                  title: 'DChat(Dog Chat) - 狗信',
                  content: '方便局域网内文本、文件传输，基于Web+Socket可在Windows+Linux+Andorid+IOS各平台自由传输',
                  gitUrl: 'https://gitee.com/daelui-dwas/dchat',
                  projectUrl: location.origin + '/#/dchat',
                  src: dchat,
                  tip: '演示环境仅前端展示，不提供服务',
                  xs: 6,
                  sm: 4
                },
                {
                  id: 3,
                  title: 'DPod(Dog Pod) - 豆荚(移动端APP)',
                  content: '日常工作生活小工具，基于UniApp开发的移动端本地应用，愿想：无须注册个人信息，无广告骚扰，纯静态数据使用',
                  gitUrl: 'https://gitee.com/daelui-dwas/dpod',
                  projectUrl: location.origin + '/dwas/dpod/app/index.html#/pages/sys/workbench/index',
                  src: dpod,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 4,
                  title: 'DBlog(Dog Blog) - 轻博客系统',
                  content: '简化版的博客，去除复杂的界面、组件和页面样式，用极简的风格展示文字、照片等内容',
                  gitUrl: 'https://gitee.com/daelui-dwas/dblog',
                  projectUrl: location.origin + '/dblog/index.html',
                  src: dblog,
                  xs: 6,
                  sm: 4
                }
              ]
            }
          ]
        },
        {
          id: 5,
          title: 'DaelUI Packages 基础开发包',
          list: [
            {
              id: 3001,
              list: [
                {
                  id: 1,
                  title: 'DogUI - 纯CSS框架(npm：@daelui/dogui)',
                  content: '纯CSS框架不依赖JavaScript功能，布局功能随意组装',
                  gitUrl: 'https://gitee.com/daelui/daelui/tree/master/packages/dogui',
                  src: dogui,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 2,
                  title: 'Molecule - 低代码分子组件开发脚手架',
                  content: '分子组件开发、预览、打包，发布至低代码平台',
                  gitUrl: 'https://gitee.com/daelui/molecule',
                  projectUrl: location.origin + '/daelui/molecule/app/index.html',
                  src: molecule,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 12,
                  title: 'Designer - 分子组件设计器与渲染器(npm：@daelui/designer)',
                  content: '分子组件渲染承载器，可用于设计与运行态',
                  gitUrl: 'https://gitee.com/daelui/daelui/tree/master/packages/designer',
                  src: designer,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 10,
                  title: 'DogJS(npm：@daelui/dogjs)',
                  content: '浏览器端组件逻辑库',
                  gitUrl: 'https://gitee.com/daelui/daelui/tree/master/packages/dogjs',
                  xs: 6,
                  sm: 4
                },
                {
                  id: 11,
                  title: 'PigJS(npm：@daelui/pigjs)',
                  content: '基于SystemJS的组件注册加载器',
                  gitUrl: 'https://gitee.com/daelui/daelui/tree/master/packages/pigjs',
                  xs: 6,
                  sm: 4
                },
                {
                  id: 13,
                  title: 'OxJS(npm：@daelui/oxjs)',
                  content: '服务端NodeJS框架',
                  gitUrl: 'https://gitee.com/daelui/daelui/tree/master/packages/oxjs',
                  xs: 6,
                  sm: 4
                },
                {
                  id: 14,
                  title: 'OxKit(npm：@daelui/oxkit)',
                  content: '服务端NodeJS组件包',
                  gitUrl: 'https://gitee.com/daelui/daelui/tree/master/packages/oxkit',
                  xs: 6,
                  sm: 4
                },
                {
                  id: 15,
                  title: 'DoGeo(npm：@daelui/dogeo)',
                  content: '基于Cesium的快速开发库',
                  gitUrl: 'https://gitee.com/daelui-df3s/dmapt/tree/master/app/src/components/dogeo',
                  xs: 6,
                  sm: 4
                }
              ]
            }
          ]
        },
        {
          id: 3,
          title: 'DaelUI Extensions 浏览器插件',
          list: [
            {
              id: 3001,
              list: [
                {
                  id: 1,
                  title: 'DQrcode - 狗狗二维码插件',
                  content: '二维码解析与生成 - 支持深浅色、大小设置 - 可下载与导入 - 可在页面右键快捷进入',
                  gitUrl: 'https://gitee.com/daelui-extensions/dqrcode',
                  src: dqrcode,
                  xs: 6,
                  sm: 4
                },
                {
                  id: 2,
                  title: 'Dog Paw - 小狗爪',
                  content: '页面小助手，浏览器插件模板，可个性化开发，取色器、强复制、DOM生成图片',
                  gitUrl: 'https://gitee.com/daelui-extensions/dpaw',
                  src: '',
                  xs: 6,
                  sm: 4
                }
              ]
            }
          ]
        }
      ]
    })

    return {
      ...toRefs(state)
    }
  },
  mounted () {
    // 图片按需加载
    this.$nextTick(() => {
      layzeImageLoad()
      document.querySelector('.foundation-main-content').addEventListener('scroll', (e) => {
        layzeImageLoad()
      })
    })

    // 图片懒加载
    function layzeImageLoad () {
      const images = document.querySelectorAll('img')
      images.forEach(image => {
        let dataSrc = image.getAttribute('data-src')
        if (!dataSrc || image.src) {
          return true
        }
        const imageTop = image.getBoundingClientRect().top
        if (imageTop < window.innerHeight) {
          image.setAttribute('src', dataSrc)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.block-site{
  padding-bottom: 30px;
  .block {
    padding: 20px 0;
    color: #666;
    &:nth-child(odd) {
      background: #fcfcfc;
      .block-head{
        border-bottom-color: #eee;
      }
    }
    & + .block {
      border-top: 1px dashed #eee;
    }
  }
  .block-head{
    position: relative;
    padding: 20px 0;
    font-size: 34px;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #efefef;
    &::after{
      content: "";
      position:absolute;
      left: 50%;
      bottom: 0;
      margin-left: -90px;
      width: 180px;
      height: 2px;
      background:#3391ff;
    }
  }
  .text-container {
    padding-bottom: 36px;
  }
  .text-theme-01{
    color: #EC5151;
  }
  .text-theme-02{
    color: #ffa400;
  }
  .text-theme-03{
    color: #96514d;
  }
  .text-theme-04{
    color: #1abd9e;
  }
  .text-theme-05{
    color: #3DBAF7;
  }
  .text-theme-06{
    color: #5D59CD;
  }
  .text-tip {
    font-size: 12px;
    font-weight: 400;
    color: #999
  }
  .icon-container{
    padding: 20px 0;
    height: 140px;
    line-height: 100px;
    text-align: center;
    font-size: 80px;
  }
  .text-title{
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    color: #666;
    font-size: 22px;
    text-align: center;
    font-weight: 700;
  }
  .text-content {
    overflow: hidden;
    min-height: 24px;
    line-height: 24px;
    color: #999;
  }
  .layout-container-even,
  .layout-container-odd {
    overflow: hidden;
    float: none;
    padding: 32px 16px 16px;
    width: auto;
    .d-row {
      margin: 0 auto;
      max-width: 1240px;
    }
    .text-content {
      font-size: 16px;
    }
  }
  .layout-container-odd {
    .layout-text {
      padding-right: 16px;
    }
  }
  .layout-container-odd {
    background: #fcfcfc;
  }
  .layout-text {
    .text-title,.text-content {
      overflow: hidden;
      margin: 0 0 12px;
      max-width: 10000px;
      text-align: left;
    }
    .d-btn-link {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .layout-image {
    a {
      display: block;
      text-align: center;
    }
    img {
      max-width: 100%;
    }
  }
}
</style>